<template>
  <div id="main">
    <el-form>
      <el-form-item label="姓名">
        <el-select ref="selectStudent" v-model="formData.student" filterable placeholder="Select">
          <el-option v-for="item in students" :key="item._id" :label="item.name" :value="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="描述类型">
        <el-radio-group v-model="formData.type">
          <el-radio :label="1">书面</el-radio>
          <el-radio :label="2">口头</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选择文件">
        <el-upload
          ref="uploader"
          drag
          action="#"
          :on-remove="onRemove"
          :on-change="onChange"
          :on-exceed="onExceed"
          :limit="1"
          :file-list="fileList"
          :before-upload="beforeUpload"
          :http-request="upload"
          :auto-upload="false"
        >
          <el-icon class="el-icon--upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">
            拖动文件或
            <em>点击选择</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">小于 100KB 的 .md 文件.</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button @click="submit" style="width:100%" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { nextTick, onBeforeMount, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getStudents } from '@/api/students.js'
import { addHomework } from '@/api/homeworks'

const students = reactive([])
const formData = reactive({
  student: '',
  type: 2
})
let fileList = ref([])
const selectStudent = ref()
const uploader = ref()

onBeforeMount(async() => {
  const res = await getStudents()
  students.push(...res)

  console.log(students)
})

function onChange(file, newfileList) {
  fileList = reactive(newfileList)
  const studentFound = students.find(s => file.name.includes(s.name))
  if (studentFound) {
    formData.student = studentFound._id
    nextTick(() => {
      submit()
    })
  } else {
    selectStudent.value.focus()
  }
  console.log(file)
}
function onRemove(file, newfileList) {
  fileList = reactive(newfileList)
}
function onExceed() {
  ElMessage.error('一次最多上传 1 个文件')
}
function beforeUpload(file) {
  // 反正自己用暂时不检测
  // if (!(/.+\.md$/).test(file.name) &&
  //   !(/.+\.docx?$/).test(file.name) &&
  //   !(/.+\.rar?$/).test(file.name) &&
  //   !(/.+\.zip?$/).test(file.name) &&
  //   !(/.+\.txt?$/).test(file.name) &&
  //   !(/.+\.pdf?$/).test(file.name)
  // ) {
  //   ElMessage.error('请上传合适的文件格式')
  //   return false
  // }
  // if (file.size > 1024 * 1024) {
  //   ElMessage.error('请上传小于 1Mb 的文件')
  // }
}
async function upload(params) {
  const fd = new FormData()
  for (const key in formData) {
    console.log(key)
    console.log(formData[key])
    fd.append(key, formData[key])
  }
  const classId = students.find(s => s._id === formData.student).class
  fd.append('class', classId)
  fd.append('file', params.file)
  await addHomework(fd)
  ElMessage.success('提交成功')
  formData.student = ''
  formData.type = 1
  uploader.value.clearFiles()
  fileList.value = []
  // TODO 清空表单, 文件
  setTimeout(() => {
    location.reload()
  }, 800)
}
function submit() {
  uploader.value.submit()
}
</script>

<style scoped>
#main {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  margin: 60px;
  width: 308px;
}
</style>
